<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <link rel="stylesheet" href="../assets/css/index.css"/>
</head>
<body>
<h1>watch</h1>
<hr>
<div id="app">
    <p>苹果</p>
    <p>购买数量:{{n}}</p>
    <p>
        <button @click="jia">+</button>
        <button @click="jian">-</button>
    </p>
    <!--<goods name="苹果" price="11"></goods>-->
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            n: '1'
        },
        methods: {
            jia: function () {
                this.n++
            },
            jian: function () {
                this.n--
            }
        },
        watch: {
//            n: function (newVal, oldVal) {
//                if (newVal < 1) {
//                    this.n = 1
//                }
////                console.log(newVal)
////                console.log(oldVal)
//            }
        }
    })

    //    vm.$watch('n', function (newVal, oldVal) {
    //        if (newVal < 1) {
    //            vm.n = 1 //发现this.n也可以
    //        }
    //    })

    vm.$watch('n', function (newVal, oldVal) {
        if (newVal < 1) {
            vm.n = 1 //发现this.n也可以
        }
    }, {deep: true, immediate: true})
    //默认也是deep=true,对象里细化的所有东西的变动全称进行监控
    //immediate监控如果数字改变了我立即回调这个数组,加载的时候就启动一遍watch
</script>
</body>
</html>